.detail-box{
  padding-bottom:100rpx;
  
  .detail-top{
      align-items: flex-start;
      padding: 30rpx;
      height: 384rpx;
    background:linear-gradient(rgba(33,126,255,1),rgba(33,126,255,0));
    box-sizing: border-box;
    .cancle-btn{
        color: #fff;
        font-size: 28rpx;
    }
    .online-title{
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
    }
}
.detail-content{
    position: relative;
    padding: 0 30rpx;
    margin-top: -270rpx;
      .content-item{
          height: auto;
          margin-bottom: 30rpx;
          padding: 40rpx 30rpx;
          border-radius: 8rpx;
          box-shadow:0rpx 10rpx 30rpx 0rpx rgba(49,51,53,0.1);
          background-color: #fff;
         
          .online-progress{
              position: relative;
              width: calc(100% - 100rpx);
              height: 44rpx;
              margin: 20rpx auto 0;
              .line-box{
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%,-50%);
                  width:100%;
                  height: 3rpx;
                  background-color: #CCCCCC;
                  .line-active{
                      position: absolute;
                      height: 100%;
                      background-color: #00BA39;
                  }
              }
          }
          .circle-list{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 100%;
              height: 100%;
              .circle{
                  width: 26rpx;
                  height: 26rpx;
                  border-radius: 50%;
                  background-color: #ccc;
              }
              image{
                  width: 44rpx;
              }
              
              .active{
                  background-color: #00BA39;
              }
          }
          .online-text{
              margin: 0 auto;
              .text-item{
                  text-align: center;
                  color:#ccc ;
                  font-size:24rpx;
                  view{
                      font-size: 32rpx;
                      font-weight: 600;
                  }
                  &.active{
                      color: #00BA39;
                  }
              }
          }
          
          .title{
              font-size: 32rpx;
              font-weight: 600;
          }
          .icon-editor{
              width: 44rpx;
          }
          .editor-input{
              margin-top: 40rpx;
              font-size: 28rpx;
          }
          .icon-complete{
              display: inline-block;
              width: 12rpx;
              height: 12rpx;
              margin-right: 10rpx;
              border-radius: 50%;
              background-color: #00BA39;
          }
          .complete-text{
              margin-top: 20rpx;
              color: #949799;
              font-size: 24rpx;
          }
          .arrow-right{
              width: 32rpx;
          }
          .order-info{
              font-size: 28rpx;
              padding: 40rpx 0;
              border-bottom: 1rpx solid #E9EDF0;
              text{
                  margin-right: 66rpx;
                  width: 116rpx;
                  color: #949799;
              }
             
              &:last-child{
                  border: 0;
              }
          }
      }
      
  }
 
 
  .btn-bottom{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 10;
      navigator,button{
          margin: 0;
          padding: 0;
          border-radius: 0;
          font-size: 32rpx;
          height: 90rpx;
          line-height: 90rpx;
          text-align: center;
          font-weight: 600;
          color: #fff;
          &:nth-of-type(1){
              width: 250rpx;
              background:linear-gradient(90deg,rgba(255,136,41,1) 0%,rgba(255,120,12,1) 100%);
          }
          &:nth-of-type(2){
              flex: 1;
              background:linear-gradient(-55deg,rgba(33,126,255,1) 0%,rgba(16,151,255,1) 100%);
          }
        }
        .active{
            background:linear-gradient(-55deg,rgb(250, 251, 251) 0%,rgb(134, 139, 143) 100%)!important;
        }
      
      .picker-time{
         flex: 1;
         height: 90rpx;
         line-height: 90rpx;
         font-size: 32rpx;
         text-align: center;
          font-weight: 600;
          color: #fff;
         background:linear-gradient(-55deg,rgba(33,126,255,1) 0%,rgba(16,151,255,1) 100%);
      }
  }
}

/* 弹窗 */
.pop-box{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    
    .pop-content{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 30rpx;
        border-radius: 20rpx 20rpx 0 0;
        background-color: #fff;
        box-sizing: border-box;
        animation:mymove .3s;
        
        @keyframes mymove
        {
        from {bottom: -100%;}
        to {bottom: 0;}
        }
        .pop-title{
            line-height: 60rpx;
            color: #636566;
            font-size: 32rpx;
            font-weight: 600;
        }
        .pop-little-title{
            margin:20rpx 0 ;
            font-size: 28rpx;
        }
        .pop-input{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90rpx;
            margin:10rpx;
            border-bottom: 1rpx solid #E9EDF0;
            label{
                font-size: 28rpx;
            }
            input{
                padding: 0 10rpx;
                height: 90rpx;
                line-height: 90rpx;
                margin: 0 10rpx 0 60rpx;
                font-size: 28rpx;
            }
            .pop-inpu-pl{
                color: #ADB0B3;
                font-size: 28rpx;
            }
        }
        .pop-image-list{
            display: flex;
            flex-wrap: wrap;
            .pop-image-item{
                position: relative;
                width: 220rpx;
                height: 220rpx;
                margin-right: 15rpx;
                margin-bottom: 15rpx;
                background-color: rgba(0,0,0,.1);
                overflow: hidden;
                &:nth-of-type(3n){
                    margin-right: 0;
                }
               image{
                    width: 100%;
                }
            }
        }
        button{
            width: 100%;
            color: var(--themColor);
            font-size: 32rpx;
            font-weight: 500;
            border: 1rpx solid #99C3FF;
            background-color: #E5F0FF;
        }
    }
}